<!--
 * @Author: your name
 * @Date: 2021-05-27 12:34:55
 * @LastEditTime: 2021-05-27 14:45:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \get-vscode-snippet-format\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>vscode user snippet</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="text-center">vscode 用户片段生成器</h1>
        <div class="mb-3">
            <label for="exampleFormControlInput2" class="form-label">scope</label>
            <input type="text" class="form-control" id="exampleFormControlInput2" placeholder="scope">
        </div>
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">prefix</label>
            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="prefix">
        </div>
        <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">body</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="body"></textarea>
        </div>
        <div class="mb-3">
            <label for="exampleFormControlTextarea2" class="form-label">description</label>
            <textarea class="form-control" id="exampleFormControlTextarea2" rows="3"
                placeholder="description"></textarea>
        </div>
        <div class="mb-3 text-center">
            <button type="button" class="btn btn-success">生成</button>
        </div>
        <h2>生成代码</h2>
        <pre class="inset-code">
            aaa
        </pre>
    </div>
    <script>
        const targetObj = {
            'Print to console': {
                scope: "javascript",
                prefix: "",
                body: [],
                description: "自定义用户片段"
            }
        }
        document.getElementsByClassName('btn')[0].addEventListener('click', function () {
            let formControlData = document.getElementsByClassName('form-control');
            console.log(formControlData)
            if (formControlData[0].value) {
                targetObj['Print to console'].scope = formControlData[0].value;
            }
            if (formControlData[1].value) {
                targetObj['Print to console'].prefix = formControlData[1].value;
            }
            if (formControlData[3].value) {
                targetObj['Print to console'].description = formControlData[3].value;
            }
            // 处理数组
            let bodyStr = formControlData[2].value;
            targetObj['Print to console'].body = bodyStr.split('\n');
            document.getElementsByClassName('inset-code')[0].innerText = JSON.stringify(targetObj['Print to console'], null, 2);
        }, false)
    </script>
</body>

</html>